<template>
  <el-dialog
    id="pdfBody"
    :title="file.FileName"
    :visible="visible"
    width="1700px"
    :modal-append-to-body="false"
    :append-to-body="true"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <div id="pdfRow" class="row" :v-loading="loading" :element-loading-text="loadTxt">
      <div class="left" :style="{width: isShowMenu ? '400px': '0px'}">
        <el-tree
          :data="menus"
          :default-expanded-keys="menuKeys"
          :default-expand-all="true"
          node-key="id"
          @node-click="chioseMenu"
        />
      </div>
      <div class="right" :style="{width: isShowMenu ? '1240px': '100%'}">
        <div style="text-align: center; line-height: 30px; height: 30px;width: 100%;">
          <el-pagination
            :current-page="index"
            :page-size="1"
            layout="total, prev, pager, next, jumper"
            :total="numPages"
            @current-change="pagingChange"
          />
        </div>
        <div class="pdfBody">
          <pdf v-if="visible" :key="index" :src="file.FileUri |imageUri" :page="index" @loaded="pdfLoaded" @progress="refreshProgress" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  props: {
    file: {
      type: Object,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pages: [],
      index: 1,
      numPages: 1,
      menuVisible: false,
      menuKeys: [],
      menus: [],
      menuId: 1,
      isShowMenu: false,
      loading: false,
      loadTxt: null,
      isInit: false,
      pdf: null,
      control: null,
      top: 0
    }
  },
  computed: {
    mainHeight() {
      return this.$store.getters.mainHeight
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    reset() {
      this.isInit = false
      this.numPages = 0
      this.index = 1
      this.pages = []
      this.control = document.getElementById('pdfBody')
      this.$nextTick(() => {
        const row = document.getElementById('pdfRow')
        this.top = row.getBoundingClientRect().top - row.offsetTop
      })
    },
    closeForm() {
      this.$emit('update:visible', false)
    },
    openMenu() {
      this.menuVisible = true
    },
    async chioseMenu(e) {
      if (this.loading || this.isInit === false) {
        return
      }
      const i = await this.pdf.getPageIndex(e.dest) + 1
      this.loading = true
      this.index = i
      this.control.scrollTop = this.top
    },
    refreshProgress(num) {
      this.loadTxt = '加载中，进度：' + Math.ceil(num * 100) + '%'
    },
    pdfLoaded(e) {
      this.pdf = e
      if (!this.isInit && e != null) {
        this.isInit = true
        this.numPages = this.pdf.numPages
        this.pdf.getOutline().then(e => {
          if (e != null) {
            this.isShowMenu = true
            this.menuKeys = []
            this.menus = e.map(c => this.loadMenu(c))
          } else {
            this.isShowMenu = false
          }
        })
      }
      this.loading = false
    },
    pagingChange(index) {
      this.loading = true
      this.index = index
    },
    loadMenu(data) {
      const menu = {
        id: this.menuId,
        label: data.title,
        dest: data.dest[0],
        children: null
      }
      if (data.items.length > 0) {
        this.menuKeys.push(menu.id)
        menu.children = data.items.map(c => {
          return this.loadMenu(c)
        })
      }
      this.menuId = this.menuId + 1
      return menu
    }
  }
}
</script>
<style scoped>
.row {
    width: 100%;
    display: inline-flex;
    margin-bottom: 20px;
    text-align: center;
}
.row .left {
  display:inline-flex;
  height: 1784px;
}
.row .left .el-tree {
  overflow-y: auto;
}
.row .right {
   display:inline;
  text-align: center;
  height: 1784px;
  overflow: auto;
}
.pdfBody {
    width: 1240px;
    height: 1754px;
    display: inline;
    overflow-y: hidden;
}
</style>
